#### threejs-案例-商品展示

- 基于15单元的基础知识实现商品展示的案例

#### 知识点

手镯展示


```
//1.渲染器
let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

console.log(renderer);

document.body.appendChild(renderer.domElement);

//2.场景

let scene = new THREE.Scene();

//3.相机

let camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);

//设置相机的位置
camera.position.z = 10;

camera.position.y = 10;

camera.position.x = -10;

//摄像机看向场景的位置
camera.lookAt(scene.position);

//把相机添加到场景里
scene.add(camera);

//加载手镯
//1.加载纹理贴图
let texture1 = new THREE.TextureLoader().load('./imgs/texture1.png');
let texture2 = new THREE.TextureLoader().load('./imgs/texture2.png');
let texture3 = new THREE.TextureLoader().load('./imgs/texture3.png');

let shouzhuo = null;
//加载几何体
let loader = new THREE.OBJLoader();

loader.load('./model.obj',function(obj){
    console.log(obj);
    shouzhuo = obj.children[0];
    //设置材质
    shouzhuo.material = new  THREE.MeshBasicMaterial({
        map:texture1
    })
    scene.add(obj);
    //手镯设置缩放
    shouzhuo.scale.set(0.3,0.3,0.3);
    //渲染
    renderer.render(scene,camera);
})

//鼠标缩放
//1.创建控制器

let controls = new THREE.OrbitControls(camera,renderer.domElement);

controls.addEventListener('change',() => {
    renderer.render(scene,camera);
})

//切换纹理

let change = document.querySelector('#change');

change.addEventListener('click',(e) => {
    if(e.target.tagName === 'SPAN'){
        let index = e.target.getAttribute('index'); //1 2 3 
        let texture = null;

        console.log(index)
        switch (index) {
            case '1':
                texture = texture1
                break;
            case '2':
                texture = texture2
                break;
            case '3':
                texture = texture3
                break;    
            default:
                break;
        }
        shouzhuo.material = new  THREE.MeshBasicMaterial({
            map:texture
        });

        renderer.render(scene,camera);
    } 
})



```


#### 作业

- 实现手镯展示的案例
